<template>
    <div class="box_wrap">
        <div>系统时间:{{defaulttime}}</div>
        <div class="footer">
            <div class="yibiaopan">
                <div class="defaulttime_yibiaopan">{{showLeftTime}}</div>
                <div class="speed">xx{{speed}}</div>
                <img class="kuaitui" src="../../assets/img/快退.png" @click="jianSu" alt="">
                <img class="zanting" v-if="startstopStatus" src="../../assets/img/暂停.png" alt=""
                    @click="zanting">
                <img class="kaishi" v-if="!startstopStatus" src="../../assets/img/开始.png" alt=""
                    @click="kaishi">
                <img class="kuaijin" src="../../assets/img/快进.png" @click="jiaSu" alt="">
            </div>
            <div class="timeline">
                <div class="choosetime">
                    <div>
                        <el-date-picker v-model="choosetime" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div class="queren">
                        <el-button type="primary" @click="toQueren">确认</el-button>
                    </div>


                </div>
                <div class="bottom">
                    <!-- -->
                    <el-slider v-model="getpercent" :format-tooltip="formatSlider" :max="sliderAllLength"
                        @change="sliderChangeOver"></el-slider>
                </div>

            </div>
        </div>
    </div>


</template>

<script>
import { validate } from '@babel/types';

var dayjs = require('dayjs')
export default {
    name: "index1",
    data() {
        return {
            startstopStatus: true, //开始暂停状态  kaishi 开始
            speed: 1, //速率
            getpercent: 0, // 滑动的位置
            chushisudu: 1,  //初始速度
            shijisudu: 1, //实际速度
            defaulttime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 系统时间
            value: 1,
            showLeftTime: dayjs(new Date().getTime() - 3600 * 1000 * 1).format('YYYY-MM-DD HH:mm:ss'), // 左侧仪表盘里面显示的时间
            choosetime: [dayjs(new Date().getTime() - 3600 * 1000 * 1).format('YYYY-MM-DD HH:mm:ss'), new Date()],
            sliderAllLength: 3600,
            jiekouTime: 1000,//接口时间
            timerOne: '', //定时器1
        }


    },
    mounted() {
        this.dateShow();
        this.one()
        // this.sliderAllLength = '3600'
    },
    computed: {

    },
    methods: {
        formatSlider() {
            // return  dayjs(new Date(this.choosetime[0]).getTime() + 1000 * this.getpercent).format('YYYY-MM-DD HH:mm:ss') 
            return this.showLeftTime
        },
        dateShow() {
            this.dateFormattimer = setInterval(() => {
                this.dateFormat()
            }, 1000)
        },
        dateFormat() {
            this.date = new Date();
            // this.data =  this.choosetime[0]
            let year = this.date.getFullYear();
            let month = this.date.getMonth() + 1 < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1;
            let day = this.date.getDate() < 10 ? "0" + this.date.getDate() : this.date.getDate();
            let hours = this.date.getHours() < 10 ? "0" + this.date.getHours() : this.date.getHours();
            let minutes = this.date.getMinutes() < 10 ? "0" + this.date.getMinutes() : this.date.getMinutes();
            let seconds = this.date.getSeconds() < 10 ? "0" + this.date.getSeconds() : this.date.getSeconds();
            this.defaulttime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        },
        //确认按钮
        toQueren() {
            this.getpercent = 0
            console.log(new Date(this.choosetime[1]).getTime());
            console.log(new Date(this.choosetime[0]).getTime());

            let startSJC = (new Date(this.choosetime[0]).getTime()) / 1000
            let endSJC = (new Date(this.choosetime[1]).getTime()) / 1000
            // 总长
            this.sliderAllLength = Math.trunc(endSJC - startSJC)
            console.log(this.sliderAllLength, "总长");

        },

        sliderChangeOver(value) {
            console.log(value)
            // this.jinducount = value;
            // this.startEvent();
        },
        sliderChange(value) {
            // this.stopEvent()
            console.log(value, "value")
            // this.jinducount = value;
            // console.log(this.jinducount, 'this.jinducount ---------this.jinducount ')

        },

        one() {
            this.timerOne = setInterval(() => {
                // debugger
                // console.log(this.getpercent)
                this.getpercent++
                this.showLeftTime = dayjs(new Date(this.choosetime[0]).getTime() + this.getpercent * this.shijisudu * 1000).format('YYYY-MM-DD HH:mm:ss')
                // console.log(this.showLeftTime, ' --------- ')
                // console.log(this.choosetime[1], ' --------- 111')
                // console.log(dayjs(new Date(this.choosetime[1])).format('YYYY-MM-DD HH:mm:ss'), ' --------- ')

                if (this.showLeftTime > dayjs(new Date(this.choosetime[1])).format('YYYY-MM-DD HH:mm:ss')) {
                    this.getpercent = 0
                    this.showLeftTime = dayjs(new Date(this.choosetime[0])).format('YYYY-MM-DD HH:mm:ss')
                }
            }, this.jiekouTime)

        },
        zanting() {
            this.startstopStatus = !this.startstopStatus
        },
        kaishi() {
            this.startstopStatus = !this.startstopStatus
        },
        jianSu() {
            this.speed--
            console.log(this.speed)
            if (this.speed == "0") {
                this.speed--
            }
        },


        jiaSu() {
            this.startstopStatus = false
            this.speed++
            console.log(this.speed)
            if (this.speed == "0") {
                this.speed++
            }

            if (this.speed > 0) {
                this.shijisudu = this.chushisudu / this.speed;
            } else {
                this.shijisudu = this.chushisudu * Math.abs(this.speed);
            }

            this.startstopStatus = true
            clearInterval(this.timerOne)
            this.one()

        }
    }
}
</script>
<style lang = "scss" scoped>
.box_wrap {
    width: 100%;
    height: 100%;
    position: relative;

    .footer {
        position: fixed;
        width: 100%;
        height: 10%;
        left: 0;
        bottom:5%;
        display: flex;

        // background-color: aquamarine;
        .yibiaopan {
            width: 150px;
            height: 120px;
            background-image: url(../../assets/img/表盘仪.png);
            position: relative;
            // background: #207fdb;


            img {
                width: 20px;
                height: 20px;
            }

            .defaulttime_yibiaopan {
                font-size: 12px;
                width: 70px;
                left: 43px;
                bottom: 53px;
                font-weight: 600;
                color: #207fdb;
                position: absolute;
                text-align: center;
            }

            .speed {
                position: absolute;
                left: 65px;
                bottom: 33px;
                color: aqua;
            }


            .kuaitui {
                position: absolute;
                left: 30px;
                bottom: 8px;

            }

            .zanting {
                position: absolute;
                left: 65px;
                bottom: 8px;
            }

            .kaishi {
                position: absolute;
                left: 65px;
                bottom: 8px;
            }

            .kuaijin {
                position: absolute;
                left: 100px;
                bottom: 8px;
            }


        }

        .timeline {
            flex: 1;
            // background: #207fdb;
            height: 120px;
            padding: 10px 15px 0 15px ;
            display: flex;
            flex-direction: column;

            .choosetime {
                height: 60px;
                display: flex;

                .queren {
                    margin-left: 10px;
                }

            }

            .bottom {
                flex: 1;
                margin-bottom: 1%
            }

        }
    }


}
</style>
